<template>
  <div class="larger" @click="show">
    <ul>
      <li v-for="item in arrImg">
        <img :src="item.path">
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      arrImg: {
        type: Array
      },
      idx: {
        type: Number
      }
    },
    mounted() {
      var idx = this.idx;
      var larger = document.querySelector('.larger')
      var oUl = document.querySelector('.larger ul');
      var aLi = document.querySelectorAll('.larger ul li');
      var aLiWidth = -document.body.offsetWidth * this.idx
      oUl.style.width = aLi.length * 100 + '%';
      oUl.style.transform = "translate(" + aLiWidth + "px)";
      for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.width = 1 / aLi.length * 100 + '%';
      }
      // 初始化手指坐标点
      var startPoint = 0;
      var startEle = 0;
      //手指按下
      larger.addEventListener("touchstart", (e) => {
        startPoint = e.changedTouches[0].pageX;
        startEle = -larger.offsetWidth * idx;
      });
      //手指滑动
      larger.addEventListener("touchmove", (e) => {
        var currPoint = e.changedTouches[0].pageX;
        var disX = currPoint - startPoint;
        var left = startEle + disX;
        oUl.style.transform = "translate(" + left + "px)";
      });
      //当手指抬起的时候
      larger.addEventListener("touchend", (e) => {
        // 判断正在滚动的图片距离左右图片的远近，以及是否为最后一张或者第一张
        if (e.changedTouches[0].pageX - startPoint > 50) {
          if (idx > 0) {
            idx--;
          } else {
            idx = 0;
          }
        } else {
          if (idx < aLi.length - 1) {
            idx++;
          } else {
            idx = aLi.length - 1;
          }
        }
        oUl.style.transform = "translate(" + -larger.offsetWidth * idx + "px)";
        oUl.style.transition = '.3s'

      })
    },
    methods: {
      //传递事件
      show() {
        this.$emit('show');
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .larger
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background #000;
    z-index: 999;
    ul
      position: absolute;
      list-style: none;
      left: 0;
      top: 50%;

      li
        transform: translateY(-50%)
        float: left;
      img
        width: 100%;


</style>
